<template>
  <div class="category">
    <swiper :options="swiperOption" class="swiper">
      <swiper-slide v-for="(cates,index) in cate" class="cl" :key="index">
        <a class="item" v-for="(cate,i) in cates" :href="cate.url" :key="i">
          <img :src="cate.icon" alt="">
          <p>{{cate.name}}</p>
        </a>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'category',
  data () {
    return {
      swiperOption: {
        direction: 'horizontal',
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets'
        }
      }
    }
  },
  props: {
    cate: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style lang="scss" scoped>
.category {
  margin-top: 0.2415rem;
  .swiper {
    margin: 0 0.2657rem;
    height: 4.72rem;
    .item {
      float: left;
      width: 20%;
      text-align: center;
      img {
        width: 1.1916rem;
        height: 1.1916rem;
      }
      p {
        color: #666;
      }
    }
  }
}
</style>
